<template>
    <div class="content">
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
            <el-form-item label="医务账号" prop="account">
                <el-input placeholder="请输入账号名/手机号/邮箱" type="text" v-model="ruleForm.account" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="账号权限" prop="checkPass">
                <el-select v-model="ruleForm.USerlimits" placeholder="请选择">
                    <el-option v-for="item in limits" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="医务密码" prop="lodPwd">
                <el-input v-model.number="ruleForm.lodPwd" type="password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="newPwd">
                <el-input v-model.number="ruleForm.newPwd" type="password"  placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item label="医务姓名" prop="useName">
                <el-input v-model.number="ruleForm.useName" placeholder="请输入该医务人员姓名"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="administrative">
                <el-radio v-model="ruleForm.sex" label="男" value="1">男</el-radio>
                <el-radio v-model="ruleForm.sex" label="女" value="2">女</el-radio>
            </el-form-item>
            <el-form-item label="身份证号" prop="IDUnber">
                <el-input v-model.number="ruleForm.IDUnber" placeholder="请输入医务人员身份证"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="cellPhone">
                <el-input v-model.number="ruleForm.cellPhone" placeholder="请输入手机号"></el-input>
            </el-form-item>

            <el-form-item label="上传照片" prop="userImg">
                <el-upload class="avatar-uploader" action="http://129.211.169.131:21003/users/uploadheader"
                    :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                    <img v-if="ruleForm.userImg" :src="ruleForm.userImg" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">确认创建</el-button>
                <el-button @click="resetForm('ruleForm')">返回上一级</el-button>
            </el-form-item>
        </el-form>
        
    </div>
</template>
  
<script>
import { accountNames, pwdcheck, IDUnber, cellPhone, userNames } from "@/utils/validdator.js";
export default {
    data() {
        return {
            ruleForm: {
                account: "",
                USerlimits: "医生",
                lodPwd: '',
                newPwd: "",
                useName: "",
                IDUnber: "",
                cellPhone: '',
                sex: "脑科",
                userImg: ''

            },
            limits: [
                {
                    value: "医生",
                    label: "医生",
                },
                {
                    value: "护士",
                    label: "护士",
                },
            ],

            administrativeLsit: [
                {
                    value: "骨科",
                    label: "骨科",
                },
                {
                    value: "内科",
                    label: "内科",
                },
                {
                    value: "脑科",
                    label: "脑科",
                }
            ],

            rules: {
                account: [{ validator: accountNames, trigger: "blur" }],
                lodPwd: [{ validator: pwdcheck, trigger: "blur" }],
                newPwd: [{ validator: pwdcheck, trigger: "blur" }],
                useName: [{ validator: userNames, trigger: "blur" }],
                IDUnber: [{ validator: IDUnber, trigger: "blur" }],
                cellPhone: [{ validator: cellPhone, trigger: "blur" }],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert("submit!");
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script>
  
<style lang="less" scoped>
.content {
    .el-form {
        .el-input {
            width: 500px;
        }
    }

    /deep/.avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 20px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>